// pages/demo/index.js
import { detectface } from '../../common/cloud-server' 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgWidth: 0,
    imgHeight: 0,
    canvas: null,
    ctx: null,
    testurl: '',
    show: false,
    src: '',
    session: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    const { windowWidth } = await wx.getSystemInfo()
    this.setData({
      imgWidth: windowWidth,
      imgHeight: windowWidth / (422 / 567)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').fields({ node: true, size: true}).exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高
      const width = res[0].width
      const height = res[0].height
      // 初始化画布大小
      const dpr = wx.getWindowInfo().pixelRatio
      canvas.width = width * dpr
      canvas.height = height * dpr
      ctx.scale(dpr, dpr)
      this.setData({
        canvas,
        ctx
      })
    })
  },
 


  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.open()
        this.drawIMG(res.tempImagePath)
        this.data.ctx.globalCompositeOperation = "soft-light";
        this.drawIMG('../../static/img/user.png')
        
        // wx.editImage({
        //   src: res.tempImagePath, // 图片路径
        //   success:(res) => {
        //     this.setData({
        //       src: res.tempFilePath
        //     })
        //     console.log(res.tempFilePath)
        //   }
        // })
      }
    })
  },

  open() {
    this.setData({
      show: !this.data.show
    })
  },

  toImgUrl () {
    const url = this.data.canvas.toDataURL()
    this.setData({
      testurl: url
    })
    console.log(url)
  },

  drawFont(event) {
    const { text } = event.mark
    this.data.ctx.fillStyle = 'rgb(200, 0, 0)';
    this.data.ctx.fillText(text, 0, 10)
  },

  drawIMG(imgurl) {
     var img = this.data.canvas.createImage()
      img.onload = () => {
         this.data.ctx.drawImage(img, 0, 0, this.data.imgWidth, this.data.imgHeight)
      }
      img.src = imgurl
      if(imgurl==='../../static/img/user.png') {
this.data.ctx.globalCompositeOperation = " destination-over";
      }
      
  },
  
  createimages(event) {
    const { url } = event.mark
    this.drawIMG(url)
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})